<template>
    <div class="consult">
        <div class="consult-hd">
            <div class="consult-hd__left">
                <div class="consult-hd__imgUrl" :style="{backgroundImage:'url('+consulter.imgUrl+')'}"></div>
            </div>
            <div class="consult-hd__right">
                <h3 class="consult-hd__name">
                    
                {{consulter.name}}</h3>
                <div class="consult-hd__contact">
                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.30rem;height:.30rem;vertical-align: -.05rem">
                        <use xlink:href="#icon-dianhua"></use>
                    </svg>
                    <span class="consult-hd__contactLocal">{{consulter.contact.local}}</span>
                    <span class="consult-hd__contactPhone">{{consulter.contact.phone}}</span>
                </div>
                <div class="consult-hd__contact">
                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.30rem;height:.30rem;vertical-align: -.05rem">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <span class="consult-hd__contactLocal">{{consulter.weixin}}</span>
                </div>
            </div>
        </div>
        <div class="consult-bd">
            <qrcode class="consult-bd__qrcode" :value="consulter.qrcode" type="img"></qrcode>
            <p class="consult-bd__tips">扫一扫上面的二维码图案，添加客服</p>
        </div>
    </div>
</template>

<script>
import { Qrcode } from 'vux'
export default {
    name: "Consult",
    components: {
        Qrcode
    },
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#2e3132;height:100%',)
    },
    beforeDestroy () {
        document.querySelector('body').setAttribute('style', '')
    },
    data () {
        return {
            consulter: {
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg',
                name: '客服小雅',
                contact: {
                    local: '010-73385128',
                    phone: '13858586666'
                },
                weixin: 'xiaoya12345',
                qrcode: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530509640467&di=e554d0f8ef48ef0123428f2dd4e83e6a&imgtype=0&src=http%3A%2F%2Fsrc.house.sina.com.cn%2Fimp%2Fimp%2Fdeal%2F86%2F68%2F4%2Fe51eac8a98c2bd65c6b68bae86c_p1_mk1_wm35.gif' 
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.consult
    width: 6.65rem
    height: 8.80rem
    margin:  1.55rem auto
    background: #fff
    border-radius: .05rem
    box-shadow: 0 0 2px #ddd
    .consult-hd
        padding: .36rem 0 .60rem 
        display: flex
        .consult-hd__left
            box-sizing: border-box
            padding-left: .3rem
            padding-right: .2rem
            .consult-hd__imgUrl
                width: 1.3rem
                height: 1.3rem
                overflow:hidden
                background-position: center center
                background-repeat: no-repeat
                -webkit-background-size:cover
                -moz-background-size:cover
                background-size:cover
                border-radius: 50%
        .consult-hd__right
            flex: 1
            .consult-hd__name
                margin-bottom: .20rem
            .consult-hd__contact
                height: .3rem
                line-height: .3rem
                margin-bottom: .15rem
    .consult-bd
        padding: 0 .75rem
        box-sizing: border-box
        .consult-bd__qrcode
            width: 100%
            text-align: center
            margin-bottom: .75rem
        .consult-bd__tips
            color: '#999999'
            font-size: .18rem
            text-align: center

                

</style>

